
var g_createHtml = function (width, height) {
    return '<div>'
        + '<div style="text-align:center;">'
        + '<h1>游戏信息</h1>'
        + '<label style="display:inline-block;width:600px;text-align:right;margin-bottom:5px;">游戏名称：<input id="create-in-game" style="width:500px; height:25px;"/></label><br>'
        + '<label style="display:inline-block;width:600px;text-align:right;margin-bottom:5px;">游戏网址：<input id="create-in-url" style="width:500px; height:25px;"/></label><br>'
        + '<label style="margin-left:100px;"><input id="create-in-autologin" type="checkbox" checked="true"/>自动登录（如果自动登录失败请去掉勾选）</label>'
        + '<h1>游戏账号</h1>'
        + '<div id="create-users-list"></div>'
        + '<div style="width:300px;height:150px;float:left;"><button style="width:200px;height:100px;margin:50px;" onclick="CreateUIAddUser(null, -1);">添加账号</button></div><br></div>'
        + '<div style="clear:both;text-align:right;margin-right:70px;"><button style="width:70px;height:30px;" onclick="alert(JSON.stringify(CreateUIGetInfos()));GetDialog().Close();">确定</button>'
        + '<button style="margin:10px;width:70px;height:30px;" onclick="GetDialog().Close();">取消</button></div>'
        + '</div>';
};

var g_createHtmlUser = function (id) {
    return '<h3 style="text-align:center;">账号信息' + (id + 1) + '</h3>'
        + '<label style="display:inline-block;width:300px;text-align:center;margin-bottom:5px;">账号：<input id="create-in-name'
            + id + '" style="width:200px; height:25px;"/></label><br>'
        + '<label style="display:inline-block;width:300px;text-align:center;margin-bottom:5px;">密码：<input id="create-in-pwd'
            + id + '" style="width:200px; height:25px;" type="password"/></label><br>'
        + '<label style="display:inline-block;width:300px;text-align:center;margin-bottom:5px;">备注：<input id="create-in-note'
            + id + '" style="width:200px; height:25px;"/></label>';
};

function IsStrEmpty(data) {
    if (!data) return true;

    //if only space.
    var regu = "^[ ]+$";
    var re = new RegExp(regu);

    return re.test(data);
}

function trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

function CreateUIScrollToBottom() {
    var ele = GetDialog().dialog;
    ele.scrollTop=ele.scrollHeight;
}

function CreateUIAddUser(list, id) {
    if (!list) list = document.getElementById("create-users-list");

    if (id < 0) id = list.childNodes.length;
    
    var div = document.createElement("div");
    div.style.cssFloat = "left";
    div.style.width = "300px";
    div.style.height = "150px";
    div.innerHTML = g_createHtmlUser(id);
    list.appendChild(div);

    CreateUIScrollToBottom();
}

function CreateUIGetInfos() {
    function getEleData(type, id, bcheck) {
        var ele = document.getElementById("create-in-" + type + id);
        if (!ele) return null;
        if (bcheck) return ele.checked;
        return trim(ele.value);
    }

    var list = document.getElementById("create-users-list");
    var info = {};
    info.game = getEleData("game", "");
    info.url = getEleData("url", "");
    info.login = getEleData("autologin", "", true);

    if (IsStrEmpty(info.game) || IsStrEmpty(info.url))
      return {};

    info.users = [];
    for (var i = 0; i < list.childNodes.length; ++i) {
        var data = {}
        data.user = getEleData("name", i);
        data.pwd = getEleData("pwd", i);
        data.note = getEleData("note", i);
        if (!IsStrEmpty(data.user) && !IsStrEmpty(data.pwd)) {
            info.users[i] = data;
        }
    }
    return info;
}

function CreateUISetInfos(info) {
    if (!info) return;
    function setEleData(type, id, bcheck, data) {
        var ele = document.getElementById("create-in-" + type + id);
        if (!ele) return null;
        if (bcheck) ele.checked = data;
        else ele.value = data;
    }

    if (IsStrEmpty(info.game) || IsStrEmpty(info.url))
      return {};
    
    setEleData("game", "", false, info.game);
    setEleData("url", "", false, info.url);
    setEleData("autologin", "", true, info.login);

    if (!info.users) return;

    var list = document.getElementById("create-users-list");

    for (var i = 0; i < info.users.length; ++i) {
        if (IsStrEmpty(info.users[i].user) || IsStrEmpty(info.users[i].pwd))
            continue;
        CreateUIAddUser(list, i);
        setEleData("name", i, false, info.users[i].user);
        setEleData("pwd", i, false, info.users[i].pwd);
        setEleData("note", i, false, info.users[i].note);
    }
}

function GetDialog() {
    var list = document.getElementById("create-users-list");
    return list.sp;
}

function CreateUIInit(sp, num) {
    var list = document.getElementById("create-users-list");
    list.sp = sp;
    for (var i = 0; i < num; ++i) {
        CreateUIAddUser(list, i);
    }
}

document.getElementById("add-alt-button").addEventListener("click", function (e) {
    var sp = new spPop();

    sp.width = document.body.clientWidth * 0.9;
    sp.height = document.body.clientHeight * 0.9;
    if (sp.width > 940) sp.width = 940;
    if (sp.height > 625) sp.height = 625;

    sp.innerHTML = g_createHtml(sp.width, sp.height);
    sp.Show();
    CreateUIInit(sp, 3)
});

document.getElementById("edit-alt-button").addEventListener("click", function (e) {
    var sp = new spPop();

    sp.width = document.body.clientWidth * 0.9;
    sp.height = document.body.clientHeight * 0.9;
    if (sp.width > 940) sp.width = 940;
    if (sp.height > 625) sp.height = 625;

    sp.innerHTML = g_createHtml(sp.width, sp.height);
    sp.Show();
    
    var info = {"game":"神仙道","login":true,"url":"http://sxd.xd.com/","users":[{"note":"备注","pwd":"123456","user":"dzlua4"},{"note":"备注","pwd":"123456","user":"dzlua1"},{"note":"备注","pwd":"123456","user":"dzlua2"},{"note":"备注","pwd":"123456","user":"dzlua3"}]};
    CreateUIInit(sp, 0);
    CreateUISetInfos(info);

});

